<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" language="javascript" src="jquery.js"></script>
        <script type="text/javascript" language="javascript" src="jquery.carouFredSel-5.1.0-packed.js"></script>
        <script type="text/javascript" language="javascript">
            $(function() {
                $('#foo0').carouFredSel({
					auto:{
                                            pauseDuration:0

                                        },
                                       scroll:{

                                           duration:15000,

                                           fx:'scroll'
                                       }
				});

            
                $(window).resize();
            });


        </script>
       <style type="text/css" media="all">
            html, body {
                padding: 0;
                margin: 0;
                height: 100%;
            }
            body, div, p {
                font-family: Arial, Helvetica, Verdana;
                color: #333;
            }
            body {
                background-color: #eee;
            }
            h1 {
                font-size: 60px;
            }
            a, a:link, a:active, a:visited {
                color: black;
                text-decoration: underline;
            }
            a:hover {
                color: #9E1F63;
            }
            #intro {
                width: 580px;
                margin: 0 auto;
            }
            .wrapper {
                background-color: white;
                width: 480px;
                margin: 40px auto;
                padding: 50px;
                box-shadow: 0 0 5px #999;
            }
            .list_carousel {
                background-color: #ccc;
                margin: 0 0 30px 60px;
                width: 360px;
            }
            .list_carousel ul {
                margin: 0;
                padding: 0;
                list-style: none;
                display: block;
            }
            .list_carousel li {
                font-size: 40px;
                color: #999;
                text-align: center;
                background-color: #eee;
                border: 5px solid #999;
                width: 50px;
                height: 50px;
                padding: 0;
                margin: 6px;
                display: block;
                float: left;
            }

            .clearfix {
                float: none;
                clear: both;
            }
            .prev {
                float: left;
                margin-left: 10px;
            }
            .next {
                float: right;
                margin-right: 10px;
            }
            .pager {
                float: left;
                width: 300px;
                text-align: center;
            }
            .pager a {
                margin: 0 5px;
                text-decoration: none;
            }
            .pager a.selected {
                text-decoration: underline;
            }
            .timer {
                background-color: #999;
                height: 6px;
                width: 0px;
            }
        </style>

       



    </head>
    <body>
        <div class="wrapper">
            <div class="list_carousel">
                <ul id="foo0">
                    <li>c</li>
                    <li>a</li>
                    <li>r</li>
                    <li>o</li>
                    <li>u</li>
                    <li>F</li>
                    <li>r</li>
                    <li>e</li>
                    <li>d</li>
                    <li>S</li>
                    <li>e</li>
                    <li>l</li>
                    <li> </li>
                </ul>
                <div class="clearfix"></div>
            </div>
        </div>
    </body>
</html>
